<template>
  <el-alert
    v-if="!detailData.isLogistics"
    type="info"
    :closable="false"
    show-icon
    title="暂无寄回信息"
    description="此订单为无物流订单"
  />
  <el-alert
    v-else-if="!tableAppealData.length"
    type="info"
    :closable="false"
    show-icon
    title="暂无寄回信息"
    description="买家未寄回商品"
  />
  <el-descriptions
    v-else
    class="global-descriptions"
    title="买家回寄"
    :column="1"
    border
  >
    <el-descriptions-item
      v-for="(item, index) in tableAppealData"
      :key="index"
      :label="'物流订单' + (index + 1)"
    >
      <div>
        <div>快递公司：{{ item.platform }}</div>
        <div>快递单号：{{ item.orderNo }}</div>
        <div>
          发货时间：<PipeDatetime :value="item.createTime" :showIcon="false" />
        </div>
      </div>
    </el-descriptions-item>
  </el-descriptions>

  <template v-if="detailData.typeAppeal === '1'">
    <el-alert
      v-if="tableAppealData.length && detailData.state === '3'"
      type="info"
      :closable="false"
      show-icon
      title="买家已回寄，请尽快补发"
      description="不添加快递信息则代表此订单为无物流订单"
      style="margin-top: 80px"
    />

    <el-descriptions
      v-if="tableAppealData.length"
      class="global-descriptions"
      title="补发信息"
      :column="1"
      border
    >
      <template #extra v-if="detailData.state === '3'">
        <el-button type="primary" @click="handleClickOpen">添加快递</el-button>
      </template>

      <el-descriptions-item
        v-for="(item, index) in tableData"
        :key="index"
        :label="'物流订单' + (index + 1)"
      >
        <div>
          <div>快递公司：{{ item.platform }}</div>
          <div>
            快递单号：{{ item.orderNo }}
            <el-button
              v-if="detailData.state === '2'"
              type="danger"
              link
              @click="handleClickDel(index)"
              style="margin-left: 16px"
              >删除</el-button
            >
          </div>
          <div v-if="detailData.state !== '2'">
            发货时间：<PipeDatetime
              :value="item.createTime"
              :showIcon="false"
            />
          </div>
        </div>
      </el-descriptions-item>
    </el-descriptions>

    <DialogLogistics
      v-model="dialogOpts.visible"
      :row-data="dialogOpts.data"
      @on-complete="dialogOpts.complete"
    />
  </template>
</template>

<script setup lang="ts">
import { PropType, reactive, ref, toRaw, watch } from 'vue';
import { InitDrawerOpts, transformPromise } from '@/utils/common';
import DialogLogistics from '@/views/order/dialog-logistics.vue';

// 弹窗
const dialogOpts = reactive(InitDrawerOpts());

// 普通发货
const tableData = ref<API.logistics.EntitySchema[]>([]);

// 退换回寄
const tableAppealData = ref<API.logistics.EntitySchema[]>([]);

// props
const props = defineProps({
  detailData: {
    type: Object as PropType<API.appeal.EntitySchema>,
    default: () => ({})
  }
});

watch(
  () => props.detailData,
  (val) => {
    if (!val || !val.logistics) return;
    tableData.value = val.logistics.filter((item) => item.type === '1');
    tableAppealData.value = val.logistics.filter((item) => item.type === '2');
  },
  {
    immediate: true
  }
);

// 打开弹窗
const handleClickOpen = async () => {
  dialogOpts.visible = true;
  const res = await transformPromise<API.logistics.EntityDto>(dialogOpts);
  if (res.action !== 'submit') return;
  tableData.value.push(res.result);
};

// 删除物流
const handleClickDel = (index: number) => {
  tableData.value.splice(index, 1);
};

// 获取数据
const getFormData = (): API.logistics.EntityDto[] => {
  return toRaw(tableData.value);
};

// 暴露方法
defineExpose({
  // // 验证数据
  // validateFormData,
  // 获取数据
  getFormData
});
</script>

<style lang="scss" scoped>
.global-descriptions {
  margin-top: 16px;
}
</style>
